const path = require("path")
const webpackBar = require("webpackbar") // 进度条
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 抽离css 的
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 打完包之后可以生成一个html文件，这个html文件自动引入打完包之后的js
module.exports = {
    mode:"development", // 模式，developmen是开发模式
    entry:[path.join(__dirname,"src","index.js"),path.join(__dirname,"src","index1.js")], //入口
    output: {   // 出口，打包到哪
        path: path.join(__dirname, 'dist'), // 打包到的文件夹，如果没有，会自动生成
        filename: 'boundel.js' // 打包出来文件得名字
    },
    module: {
        rules: [ // 规则
          {
            test: /\.(png|jpg|gif|eto|svg|ttf|woff|woff2)$/,
            use: [
              {
                loader: 'file-loader',
              }
            ]
          },
          {
            test: /\.css$/,
            use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
          },
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
            }
          }
        ]
    },
    resolve: {
      extensions: ['.js', '.json', '.wasm','.css'], // 可以省略后缀名的文件类型
      alias: {
       "@":path.resolve(__dirname,"src/") // 用@代替dat04/src/
      },
    },
    plugins: [new HtmlWebpackPlugin(),new MiniCssExtractPlugin({filename:"css/style.css"}),new webpackBar()],
    devServer: {
      port: 7001, // 端口号
      host:"localhost", // 域名
      hot:true ,// 热更新
      open:true // 自动打开浏览器
    }

}